<template>
  <scroll-view scroll-x class="scroll-header">
    <div class="scroll-header-item">
      <i-card title="力量">
        <view slot="content">
          <div style="display: flex; align-items: center">
            <div style="font-size: 16px;">难度</div>
            <div>
              <i-rate :disabled="true" :value="hardLevel.power"/>
            </div>
          </div>
          <i class="material-icons icon" style="">accessibility</i>
        </view>
        <view slot="footer">{{participants.power}}人已参加</view>
      </i-card>
    </div>
    <div class="scroll-header-item">
      <i-card title="速度">
        <view slot="content">
          <div style="display: flex; align-items: center">
            <div style="font-size: 16px;">难度</div>
            <div>
              <i-rate :disabled="true" :value="hardLevel.speed"/>
            </div>
          </div>
          <i class="material-icons icon" style="">accessibility</i>
        </view>
        <view slot="footer">{{participants.speed}}人已参加</view>
      </i-card>
    </div>
    <div class="scroll-header-item">
      <i-card title="柔韧">
        <view slot="content">
          <div style="display: flex; align-items: center">
            <div style="font-size: 16px;">难度</div>
            <div>
              <i-rate :disabled="true" :value="hardLevel.flexible"/>
            </div>
          </div>
          <i class="material-icons icon" style="">accessibility</i>
        </view>
        <view slot="footer">{{participants.flexible}}人已参加</view>
      </i-card>
    </div>
    <div class="scroll-header-item">
      <i-card title="耐力">
        <view slot="content">
          <div style="display: flex; align-items: center">
            <div style="font-size: 16px;">难度</div>
            <div>
              <i-rate :disabled="true" :value="hardLevel.endurance"/>
            </div>
          </div>
          <i class="material-icons icon" style="">accessibility</i>
        </view>
        <view slot="footer">{{participants.endurance}}人已参加</view>
      </i-card>
    </div>
    <div class="scroll-header-item">
      <i-card title="灵敏">
        <view slot="content">
          <div style="display: flex; align-items: center">
            <div style="font-size: 16px;">难度</div>
            <div>
              <i-rate :disabled="true" :value="hardLevel.sensitive"/>
            </div>
          </div>
          <i class="material-icons icon" style="">accessibility</i>
        </view>
        <view slot="footer">{{participants.sensitive}}人已参加</view>
      </i-card>
    </div>

  </scroll-view>
</template>

<script>
  export default {
    name: 'recommend',
    data: () => ({
      hardLevel: {
        power: 2,
        speed: 1,
        flexible: 3,
        endurance: 4,
        sensitive: 5
      },
      participants: {
        power: 1000,
        speed: 2000,
        flexible: 3000,
        endurance: 30000,
        sensitive: 200
      }
    })
  }
</script>

<style scoped>
  .icon {
    font-size: 60px;
    float: right;
    right: 10px;
  }
  .scroll-header {
    display: flex;
    white-space: nowrap;
  }
  .scroll-header-item {
    width: 250px;
    display: inline-block;
  }
</style>
